<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
        <router-link
        class="item" v-for="item of recommdList" :key="item.id"
        tag="li"
        :to="'/detail/' + item.id"
        >
                <img class="item-img" :src="item.imgUrl">
            <div class="item-info">
                <p class="item-title">{{item.imgTitle}}</p>
                <p class="item-desc">{{item.imgDesc}}</p>
                <button class="item-button">查看详情</button>
            </div>
        </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommd',
  props: {
    recommdList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/mixins.styl'
  .title
   margin-top: .2rem
   line-height: .8rem
   background: #eee
   text-indent:.2rem
  .item
   overflow hidden
   display:flex
   height 1.9rem
   margin-top:.4rem
   .item-img
    width: 1.7rem
    height 1.7rem
    padding: .1rem
   .item-info
    flex: 1
    padding: .1rem
    min-width: 0
    .item-title
     line-height: .54rem
     font-size: .32rem
     ellipsis()
    .item-desc
     line-height: .4rem
     color: #ccc
     ellipsis()
    .item-button
     margin-top: .2rem
     background: #ff9300
     padding: 0 .2rem
     border-radius: .06rem
     color: #fff
</style>
